<template>
  <view class="reviews-list">
    <view
      class="reviews-item"
      v-for="(item, index) in list"
      :key="index"
      @click="toDetail(item)">
      <!-- <view class="avatar-box">
				<image v-if="item.touxiang" :src="item.touxiang" mode=""></image>
				<image v-else :src="avatarDefault" mode=""></image>
			</view> -->
      <view class="reviews-info">
        <view class="user-box flex">
          <view class="avatar-box">
            <image
              v-if="item.image"
              :src="item.image"
              mode="aspectFill"></image>
            <image v-else :src="vuex_avatar_default" mode=""></image>
          </view>
          <view class="user-info flex-between">
            <view class="reviews-nick">
              {{ item.nickname }}
            </view>
            <view class="reviews-time">
              {{ item.createdTime }}
            </view>
          </view>
        </view>
        <!-- <view class="reviews-star">
					<view class="star-list flex">
						<view class="star-item" v-for="(starItem,starIndex) in item.starItems" :key="starIndex">
							<image v-if="starItem.value == 0" src="@/static/review/star0.png" mode=""></image>
							<image v-if="starItem.value == 1" src="@/static/review/star1.png" mode=""></image>
						</view>
					</view>
				</view> -->
        <view class="reviews-guige">
          规格：{{ item.productKeyVals || "默认" }}
        </view>
        <view class="reviews-text">
          {{ item.content }}
        </view>

        <view class="reviews-pic">
          <view class="pic-list">
            <view
              class="pic-item"
              v-for="(pic, picindex) in item.images"
              :key="picindex"
              @click="doPreview(picindex, pic, item.images)">
              <image :src="pic" mode=""></image>
            </view>
          </view>
        </view>

        <!-- 相关产品 -->
        <!-- showRelativeProduct -->
        <view
          class="product-box flex"
          v-if="showRelativeProduct"
          @click="toProduct(item)">
          <view class="poster-box">
            <image :src="item.productImage" mode="aspectFill"></image>
          </view>
          <view class="product-info">
            <view class="product-title ellipsis-2">
              {{ item.productName }}
            </view>
            <view class="product-des">
              {{ item.productName }}
            </view>
            <view class="product-price">{{ item.priceSale }}积分</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    //评论列表
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //是否展示当前评论的相关产品
    showRelativeProduct: {
      type: Boolean,
      default: false,
    }, //是否点击后进入评价详情
    allowClickToDetail: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      starItems: [
        {
          value: 1,
        },
        {
          value: 1,
        },
        {
          value: 1,
        },
        {
          value: 0,
        },
        {
          value: 0,
        },
      ],
    };
  },
  methods: {
    doPreview(current, image, urls) {
      console.log("图片预览 pic", image);
      // console.log('图片预览 urls', urls)
      uni.previewImage({
        current: current,
        urls: urls,
        indicator: "default",
        loop: false,
      });
    },

    toProduct(item) {
      this.toRoute({
        path: "/product-detail",
        query: {
          id: item.inventoryId,
        },
      });
    },
    toDetail(item) {
      /* if(!this.$props.allowClickToDetail) {
					return 
				} */

      this.toRoute({
        path: "/product-review-detail",
        query: {
          item: JSON.stringify(item),
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.reviews-list {
  .reviews-item {
    margin-bottom: 24rpx;
    display: flex;
    align-items: flex-start;
    padding: 32rpx 24rpx;
    // border-bottom: 1rpx solid #EEEEEE;
    background: #ffffff;
    // box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(0, 0, 0, 0.06);
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    &:last-child {
      border-bottom: none;
    }

    // .avatar-box {
    // 	width: 80rpx;
    // 	height: 80rpx;
    // 	border-radius: 50%;
    // 	overflow: hidden;

    // 	image {
    // 		width: 80rpx;
    // 		height: 80rpx;
    // 	}
    // }

    .reviews-info {
      flex: 1;
      overflow: hidden;
      // padding-left: 20rpx;

      .user-box {
        .avatar-box {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          overflow: hidden;

          image {
            width: 60rpx;
            height: 60rpx;
          }
        }

        .user-info {
          flex: 1;
          overflow: hidden;
          padding-left: 24rpx;

          .reviews-nick {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;
          }

          .reviews-time {
            // margin-top: 10rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #9695a3;
          }
        }
      }

      .reviews-star {
        margin-top: 10rpx;

        .star-list {
          .star-item {
            margin-right: 4rpx;
            width: 22rpx;
            height: 22rpx;

            image {
              width: 22rpx;
              height: 22rpx;
            }
          }
        }
      }

      .reviews-guige {
        margin-top: 26rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #9695a3;
      }

      .reviews-text {
        text-align: justify;
        margin-top: 20rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #222222;
        line-height: 1.6;
      }

      .reviews-pic {
        margin-top: 20rpx;

        .pic-list {
          display: flex;
          flex-wrap: wrap;

          .pic-item {
            margin-top: 20rpx;
            width: 140rpx;
            height: 140rpx;
            border-radius: 12rpx 12rpx 12rpx 12rpx;
            overflow: hidden;
            margin-right: 20rpx;

            &:nth-child(4n) {
              margin-right: 0;
            }

            &:nth-child(-n + 4) {
              margin-top: 0;
            }

            image {
              width: 140rpx;
              height: 140rpx;
            }
          }
        }
      }

      .product-box {
        margin-top: 30rpx;
        // width: 610rpx;
        min-height: 80rpx;
        background: #f8f8f8;

        border-radius: 0rpx 0rpx 0rpx 0rpx;
        padding: 0;

        .poster-box {
          width: 124rpx;
          height: 124rpx;
          border-radius: 8rpx;
          overflow: hidden;

          image {
            width: 124rpx;
            height: 124rpx;
          }
        }

        .product-info {
          padding: 10rpx;
          padding-left: 24rpx;
          flex: 1;
          overflow: hidden;

          .product-title {
            /* height: 70rpx; */
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;
          }

          .product-price {
            margin-top: 14rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;

            .huobi {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 20rpx;
              color: #e23410;
            }

            .value {
              font-family: PingFang SC, PingFang SC;
              font-weight: bold;
              font-size: 32rpx;
              color: #e23410;
            }
          }
        }
      }
    }
  }
}
</style>
